<template>
  <div style="margin-top: 50px">
    <el-row>
      <el-col :span="24" style="display: flex; align-items: center;">
        <span style="margin-left: 450px">数据选择</span>
        <el-select v-model="mode">
          <el-option label="中风预测" value="healthcare"></el-option>
          <el-option label="薪资预测" value="salary"></el-option>
        </el-select>


      <el-button type="warning" style="margin-left: 40px"
                  v-loading.fullscreen.lock="fullscreenLoading"
                  element-loading-text="拼命加载中"
                  @click="trainButtonHandler">训练</el-button>

      </el-col>
      <el-col :span="24" style="display: flex; align-items: center;">
        <span style="margin-left: 450px">上传数据集:</span>
        <el-upload style="margin-left: 20px;margin-top: 20px"
                   class="upload-demo"
                   drag
                   action="http://localhost:8008/uploadFile"
                   multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text"><em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">请上传csv文件</div>
        </el-upload>

      </el-col>

      <div style="margin-left: 40px">
          <span v-if='isSuccess' style="color: blue">训练成功, {{ modelScore }}</span>
      </div>

    </el-row>
  </div>


</template>

<script>
export default {
  name: 'modeTrain',
  data(){
    return{
      modelScore: '',
      res: 0
    }
  },
  computed: {
    isSuccess(){
      return this.res === 1
    }
  },
  methods:{
    //训练按钮事件
    async trainButtonHandler () {
      console.log(this.mode)

      const response = await this.$http.get('/train', {
          params: { mission: this.mission, mode: this.mode }
        });
        if (response.status === 200) {
          this.modelScore = response.data.msg
          this.res = response.data.data
        } else {
          this.errorMessage = '服务器返回错误状态码';
        }
        }
    },
  }

</script>



<style scoped>

</style>
